<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript"></script>
		<script src="axios.min.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="app">
			分类:<select v-model="selectId">
				<option v-for="category in categoryList" 
				v-bind:value="category.categoryId">
				{{category.categoryName}}
				</option>				
			</select>
			<br>
			名称：<input v-model="itemName" /><br>
			价格:<input v-model="itemPrice" /><br>
			描述:<input v-model="itemDesc" /><br>
			图片:<input v-model="itemImage" /><br>
			<button v-on:click="insert">添加</button>
		
		<table border="2">
			<tr>
				<td>商品编号</td>
				<td>名称</td>
				<td>价格</td>
				<td>删除</td>
				<td>修改</td>
			</tr>
			<tr v-for="item in itemList">
				<td>{{item.itemId}}</td>
				<td>{{item.itemName}}</td>
				<td>{{item.itemPrice}}</td>
				<td v-on:click="deleteItem(item.itemId)">
					删除
					</td>
				<td>
				<a v-bind:href="'update.html?itemId='+item.itemId">
				修改
				</a>
				</td>
			</tr>
		</table>
		
		</div>
	</body>
	<script>
		var config={
			el:"#app",
			data:{
				selectId:null,
				categoryList:[],
				itemName:"",
				itemPrice:"",
				itemDesc:"",
				itemImage:"",
				itemList:[]
			},
			methods:{
				deleteItem:function(itemId){
					var result=window.confirm("你真的要删除吗?");
					//window.alert(result);
					if (result){
						var serverUrl="http://localhost:1314"
						+"/item/delete?itemId="+itemId;
						console.log(serverUrl);
						var vue=this;
						axios.get(serverUrl)
						.then(function(res){
							debugger;
							//sqlyog查看数据是否删除
							window.alert(res.data);
							//重新查询
							vue.findItem();
						})
						.catch();
					}
				},
				findItem:function(){
					var serverUrl="http://localhost:1314/item/selectAll";
					var vue=this;
					axios.get(serverUrl)
					.then(function(res){
						vue.itemList=res.data;
					})
					.catch(function(e){
						window.alert("联网失败");
						console.log(e);
					});
				},
				insert:function(){
					debugger;
					var serverurl="http://localhost:1314/item/insert?"
					+"categoryId="+this.selectId
					+"&itemName="+this.itemName
					+"&itemPrice="+this.itemPrice
					+"&itemDesc="+this.itemDesc
					+"&itemImage="+this.itemImage;
					//输入参数，点添加，从console中拷贝url到浏览器
					console.log(serverurl);
					axios.get(serverurl)
					.then(function(res){
						window.alert(res.data);
					})
					.catch(function(e){
						window.alert("联网失败");
						console.log(e);
					});
				},
				findCategory:function(){
					debugger;
					var serverUrl="http://localhost:1314/category/selectAll";
					var vue=this;
					axios.get(serverUrl)
					.then(function(res){
						debugger;
						vue.categoryList=res.data;
					})
					.catch(function(e){
						window.alert("联网失败");
						console.log(e);
					});
				}
			},
			mounted:function(){
				console.log("mounted()");
				this.findCategory();
				this.findItem();
			}
		}
		var vue=new Vue(config);
	</script>
</html>



